<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='description' content='Examples using Tempus Dominus without Bootstrap or other css frameworks.'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width,initial-scale=1,shrink-to-fit=no'>

  <title>Examples - No Styles - Tempus Dominus</title>

  <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>
  <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>
  <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'>
  <link rel='manifest' href='/site.webmanifest'>
  <link rel='mask-icon' href='/safari-pinned-tab.svg' color='#5bbad5'>
  <meta name='msapplication-TileColor' content='#da532c'>
  <meta name='theme-color' content='#ffffff'>

  <meta name='title' content='Examples - No Styles'>
  <meta name='description' content='Examples using Tempus Dominus without Bootstrap or other css frameworks.'>


  <meta property='og:type' content='article'>
  <meta property='og:url' content='https://getdatepicker.com/docs/6/examples/no-styles.html'>
  <meta property='og:title' content='Examples - No Styles'>
  <meta property='og:description' content='Examples using Tempus Dominus without Bootstrap or other css frameworks.'>
  <meta class='metaImage' property='og:image' content=''>

  <meta property='article:published_time' content='2021-07-08T04:00:00.000Z'>
  <meta property='article:modified_time' content='2021-07-08T04:00:00.000Z'>
  <meta property='article:tag' content='datepicker, javascript, open source, tempus dominus, eonasdan'>
  <meta property='article:author' content='Jonathan Peterson'>
  <meta property='article:section' content='Technology'>


  <meta property='twitter:card' content='summary_large_image'>
  <meta property='twitter:site' content='@eonasdan'>
  <meta property='twitter:creator' content='@eonasdan'>
  <meta property='twitter:url' content='https://getdatepicker.com/docs/6/examples/no-styles.html'>
  <meta property='twitter:title' content='Examples - No Styles'>
  <meta property='twitter:description' content='Examples using Tempus Dominus without Bootstrap or other css frameworks.'>
  <meta class='metaImage' property='twitter:image' content=''>


  <script src='/js/bundle.min.js'></script>
  <script src='/6/js/tempus-dominus.js'></script>
  <link rel='stylesheet' href='/6/css/tempus-dominus.css'>

</head>

<body>
<div id='outerContainer' class='container-xxl my-md-4 bd-layout'>
  <main class='bd-main order-1'>
    <div class='bd-intro ps-lg-4'>
      <div class='d-md-flex align-items-center justify-content-between'>
        <h1 class='bd-title title' id='content'>Examples without external styles</h1>
      </div>
    </div>
    <div id='mainContent' class='bd-content ps-lg-4'>
      <div class='row'>
        <p>
        This page is to demonstrate that the picker can be used free of other styling.
        </p>
        <p>
          For full examples and to return to the main site <a href='index.html'>click here</a>.
        </p>
      </div>
      <div class='row'>
        <div class='tab-pane fade show active' id='datetimepicker1Html' role='tabpanel'
             aria-labelledby='datetimepicker1Html-tab'>
         <pre>
           <code class='language-html'>
 &lt;div
     class='input-group'
     id='datetimepicker1'
     data-td-target-input='nearest'
     data-td-target-toggle='nearest'
 &gt;
   &lt;input
     id='datetimepicker1Input'
     type='text'
     class='form-control'
     data-td-target='#datetimepicker1'
   /&gt;
   &lt;span
     class='input-group-text'
     data-td-target='#datetimepicker1'
     data-td-toggle='datetimepicker'
   &gt;
     &lt;span class='fas fa-calendar'&gt;&lt;/span&gt;
   &lt;/span&gt;
 &lt;/div&gt;
           </code>
         </pre>
        </div>
        <div class='tab-pane fade' id='datetimepicker1Js' role='tabpanel' aria-labelledby='datetimepicker1Js-tab'>
         <pre>           <code class='language-javascript'>
 new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));
           </code>
         </pre>
        </div>

        <div class='container'>
          <div class='row'>
            <div class='col-sm-6'>
              <label for='datetimepicker1Input' class='form-label'>Simple picker</label>
              <div class='input-group ' id='datetimepicker1' data-td-target-input='nearest'
                   data-td-target-toggle='nearest'>
                <input id='datetimepicker1Input' type='text' class='form-control' data-td-target='#datetimepicker1'>
                <span class='input-group-text' data-td-target='#datetimepicker1' data-td-toggle='datetimepicker'>
               <span class='fas fa-calendar'></span>
             </span>
              </div>
            </div>
          </div>
        </div>
        <script type='text/javascript'>
          new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));
        </script>
      </div>
    </div>
  </main>
</div>
<style>
    /* these styles are here to keep the pickers off the edge of the screen */
    .container {
        width: 100%;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
        margin-right: auto;
        margin-left: auto;
        max-width: 80vh;
    }
    .row {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(var(--bs-gutter-y) * -1);
        margin-right: calc(var(--bs-gutter-x) / -2);
        margin-left: calc(var(--bs-gutter-x) / -2);
    }
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/solid.min.js'
        integrity='sha512-Qc+cBMt/4/KXJ1F6nNQahXIsgPygHM4S2XWChoumV8qkpZ9oO+gBDBEpOxgbkQQ/6DlHx6cUxa5nBhEbuiR8xw=='
        crossorigin='anonymous' referrerpolicy='no-referrer'></script>
<script defer='' src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/brands.min.js'
        integrity='sha512-vefaKmSAX3XohXhN50vLfnK12TPIO+4uRpHjXVkX726CqbicEiAQGRzsMTE+EpLkBk4noUcUYu6AQ5af2vfRLA=='
        crossorigin='anonymous' referrerpolicy='no-referrer'></script>
<script defer='' src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/fontawesome.min.js'
        integrity='sha512-KCwrxBJebca0PPOaHELfqGtqkUlFUCuqCnmtydvBSTnJrBirJ55hRG5xcP4R9Rdx9Fz9IF3Yw6Rx40uhuAHR8Q=='
        crossorigin='anonymous' referrerpolicy='no-referrer'></script>

<script defer='' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js'
        integrity='sha512-YBk7HhgDZvBxmtOfUdvX0z8IH2d10Hp3aEygaMNhtF8fSOvBZ16D/1bXZTJV6ndk/L/DlXxYStP8jrF77v2MIg=='
        crossorigin='anonymous'></script>
<script defer='' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-javascript.min.js'
        integrity='sha512-I4ZWqUpk7wqHcm7Gkv7k4IdgrDUTlGm1a7xeqyduqZLWeoGOn2E9us4XNBEDGclpk+6d1CmqIHYwmoyyL59zeA=='
        crossorigin='anonymous'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.min.css'
      integrity='sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg=='
      crossorigin='anonymous'>
<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
<script defer=''>
  kofiWidgetOverlay.draw('eonasdan', {
    'type': 'floating-chat',
    'floating-chat.donateButton.text': 'Support me',
    'floating-chat.donateButton.background-color': '#323842',
    'floating-chat.donateButton.text-color': '#fff'
  });
</script>
</body>
</html>
